<template>
  <div class="content">
    <div id="jiachang">
      <h1 class="jiachang">家常菜谱</h1>

      <div class="title">
        <ul>
          <li class="Li" v-for="(item, index) in cai" :key="index">
            <a :href="'#' + `${item.title}`" id="li-a">{{ item.title }}</a>
          </li>
        </ul>
      </div>

      <div v-for="(item, index) in cai" :key="index" :class="item.sty">
        <div class="c-name">
          <div :id="`${item.title}`">{{ item.title }}</div>
        </div>
        <ul class="">
          <li v-for="(item2, index2) in item.detail" :key="index2">
            <a href="#">{{ item2 }}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import { jiachangcai } from "../data/jiachang";
export default {
  data() {
    return {
      cai: jiachangcai,
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
div {
  display: block;
}
.content {
  padding-bottom: 24px;
  width: 1440px;
  height: 1700px;
}
#jiachang {
  width: 960px;
  height: 1750px;
  margin: 0 auto;
  min-width: 960px;
}
.jiachang {
  font-size: 20px;
  color: #817c74;
  margin-top: 20px;
  text-align: center;
  line-height: normal;
  font-weight: 400;
}
.title {
  width: 960px;
  height: 224px;
}
.title > ul > li {
  float: left;
  margin-right: 10px;
  text-align: center;
  font-size: 16px;
}
ul {
  list-style: none;
  display: block;
  /* margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px; */
}
li {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  font: 14px/1.3 tahoma, arial, "microsoft yahei", \5b8b\4f53;
  font-family: tahoma, arial, "microsoft yahei", 宋体;
}
ul > li > a {
  text-decoration: none;
  color: black;
}
ul > li > a:hover {
  color: orangered;
}
#li-a {
  display: block;
  color: #fff;
  padding: 10px 22px;
  height: 1em;
  line-height: 1em;
  background-color: #a79e95;
}

.Ul > Li > #li-a:hover {
  background-color: orange;
}

.zhurou {
  width: 958px;
  height: 154.586px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.zhurou > div {
  width: 958px;
  height: 40px;
  background-color: #f1f0ee;
}
.zhurou > div > div {
  width: 908px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.zhurou > ul {
  display: block;
  width: 958px;
  height: 99.586px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.zhurou > ul > li {
  width: 80px;
}

.jirou {
  width: 958px;
  height: 154.586px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.jirou > div {
  width: 958px;
  height: 40px;
  background-color: #f1f0ee;
}
.jirou > div > div {
  width: 908px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.jirou > ul > li {
  width: 80px;
}
.jirou > ul {
  display: block;
  width: 958px;
  height: 99.586px;
  margin-bottom: 15px;
  padding-left: 15px;
}

.yurou {
  display: inline-block;
  width: 468px;
  height: 187.781px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.yurou > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.yurou > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.yurou > ul > li {
  width: 80px;
}
.yurou > ul {
  display: block;
  width: 468px;
  height: 132.781px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.niurou {
  float: right;
  width: 468px;
  height: 121.391px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.niurou > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.niurou > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.niurou > ul > li {
  width: 80px;
}
.niurou > ul {
  display: block;
  position: relative;
  width: 468px;
  height: 66.391px;
  margin-bottom: 15px;
  padding-left: 15px;
}

.danlei {
  display: inline-block;
  width: 468px;
  height: 121.391px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.danlei > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.danlei > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.danlei > ul > li {
  width: 80px;
}
.danlei > ul {
  display: block;
  width: 468px;
  height: 66.391px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.yangrou {
  float: right;
  width: 468px;
  height: 88.195px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: -45px;
}
.yangrou > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.yangrou > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.yangrou > ul {
  display: block;
  width: 468px;
  height: 33.195px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.yangrou > ul > li {
  width: 80px;
}
.paigu {
  float: left;
  width: 468px;
  height: 88.195px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.paigu > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.paigu > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.paigu > ul {
  display: block;
  height: 33.391px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.paigu > ul > li {
  width: 80px;
}
.doufu {
  float: right;
  display: block;
  width: 468px;
  height: 121.391px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: -78px;
}
.doufu > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.doufu > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.doufu > ul {
  display: block;
  width: 468px;
  height: 66.391px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.doufu > ul > li {
  width: 80px;
}
.xialei {
  clear: left;
  position: relative;
  top: 20px;
  width: 468px;
  height: 88.195px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.xialei > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.xialei > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.xialei > ul {
  display: block;
  width: 468px;
  height: 33.195.px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.xialei > ul > li {
  width: 80px;
}

.qiezi {
  float: right;
  display: block;
  width: 468px;
  height: 121.391px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: -135px;
}
.qiezi > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.qiezi > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}
.qiezi > ul {
  display: block;
  width: 468px;
  height: 66.391px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.qiezi > ul > li {
  width: 80px;
}

.nangua {
  clear: left;
  position: relative;
  top: 20px;
  width: 468px;
  height: 88.195px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.nangua > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.nangua > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.nangua > ul > li {
  width: 80px;
}
.nangua > ul {
  display: block;
  width: 468px;
  height: 33.195.px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.tudou {
  float: right;
  display: block;
  width: 468px;
  height: 121.391px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: -103.5px;
}
.tudou > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.tudou > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}
.tudou > ul {
  display: block;
  width: 468px;
  height: 66.391px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.tudou > ul > li {
  width: 80px;
}
.liangcai {
  display: inline-block;
  width: 468px;
  height: 121.391px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 40px;
}
.liangcai > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.liangcai > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.liangcai > ul {
  display: block;
  width: 458px;
  height: 66.391px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.liangcai > ul > li {
  width: 80px;
}
.jiu {
  float: right;
  display: block;
  width: 468px;
  height: 121.391px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: -123px;
}
.jiu > div {
  width: 468px;
  height: 40px;
  background-color: #f1f0ee;
}
.jiu > div > div {
  width: 418px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}
.jiu > ul {
  display: block;
  width: 468px;
  height: 66.391px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.jiu > ul > li {
  width: 80px;
}
.jiachangsucai {
  width: 958px;
  height: 121.391px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.jiachangsucai > div {
  width: 958px;
  height: 40px;
  background-color: #f1f0ee;
}
.jiachangsucai > div > div {
  width: 908px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.jiachangsucai > ul > li {
  width: 80px;
}
.jiachangsucai > ul {
  display: block;
  width: 958px;
  height: 99.586px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.jigeng {
  width: 958px;
  height: 154.586px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  margin-top: 20px;
}
.jigeng > div {
  width: 958px;
  height: 40px;
  background-color: #f1f0ee;
}
.jigeng > div > div {
  width: 908px;
  height: 40px;
  line-height: 40px;
  background-color: #f1f0ee;
  font-size: 18px;
  padding: 0 25px;
}

.jigeng> ul > li {
  width: 80px;
}
.jigeng > ul {
  display: block;
  width: 958px;
  height: 99.586px;
  margin-bottom: 15px;
  padding-left: 15px;
}
</style>